<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品图片上传</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/js/layui/css/layui.css" media="all">
    <style>
        /*设置预览图片的大小，位置*/
        .layui-upload-img{width: 105px; height: 105px; margin: 0 10px 10px 30px;}
        button{margin: 0 0px 0px 30px;}
    </style>
</head>
<body>
    <br>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">选择商品默认图片</button>
    <div class="layui-upload-list">
        <img class="layui-upload-img" id="demo1">
        <p id="demoText"></p>
    </div>
    <button type="button" class="layui-btn" id="test8">
        <i class="layui-icon">&#xe67c;</i>开始上传</button>
    <br>
    <hr style="border:1px solid black">
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            商品详情图片(使用中)：
            <div class="layui-upload-list" id="originalImg"></div>
        </blockquote>
    <br>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">选择商品详情图片</button> <span>按住键盘ctrl键，选中要上传的所有图片，不能多于4张图片</span>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            新图片预览：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>
    <button type="button" class="layui-btn" id="test9">
        <i class="layui-icon">&#xe67c;</i>开始上传</button>
</div>
</body>
<script src="${pageContext.request.contextPath}/assets/js/core/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/layui/layui.js"></script>
<script>
    var goId = ${param.goId};
    var goodsDefaultImgId = "";         //默认图片 id
    var goodsUnDefaultImgIds = "";      // 非默认图片 id 用逗号拼接成的字符串

    var param = {
        goId:goId
    }
    var url = "/goods/selectGoodsImgListByGoId";
    $.get(url,param,function (data){
        if(data.code ==1001){
            console.log(data);
            for(var i=0;i<data.goodsImgList.length;i++){
                var goodsImg = data.goodsImgList[i];
                if(goodsImg != null){
                    var result = "${pageContext.request.contextPath}/file/goodsInfo/"+goodsImg.imgUrl;
                    if(goodsImg.imgDefault == 1){
                        goodsDefaultImgId = goodsImg.imgId;
                        $('#demo1').attr('src', result);
                    }else {
                        goodsUnDefaultImgIds += goodsImg.imgId + "," ;
                        $('#originalImg').append('<img src="'+ result +'" alt="'+ goodsImg.imgUrl +'" class="layui-upload-img">')
                    }
                }
            }
        }
    })

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/goods/insertGoodsImg'   //改成您自己的上传接口
            ,auto: false					//选择文件后不自动上传
            ,bindAction: '#test8' 			// 指向一个按钮触发上传 (id)
            ,choose: function(obj){			//选择图片后做的事
                //当重新选择图片后，使上传按钮可用
                $("#test8").removeClass("layui-btn-disabled");
                $("#test8").prop("disabled", false);
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,before: function(obj){
                this.data={"goId":goId,"imgIds":goodsDefaultImgId,"imgDefault":1,"type":"1"}//携带参数
            }
            ,done: function(res){       //上传后的回调函数
                if(res.code == 1001){   //上传成功
                    return layer.msg(res.message);
                }else if(res.code == 1002) {   //如果上传失败
                    return layer.msg(res.message);
                }

            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/goods/insertGoodsImg' //改成您自己的上传接口
            ,accept: 'images'  //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
            ,multiple: true    //表示多文件上传，设置 true即可开启
            ,number:4          //设置同时可上传的文件数量，一般配合 multiple 参数出现。
            ,acceptMime: 'image/*'   //规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如：acceptMime: 'image/*'（只显示图片文件）
            ,auto: false       //取消自动上传，设置 bindAction 参数来指向一个其它按钮提交上传
            ,bindAction: '#test9'       //指向一个其它按钮提交上传  #test9 指按钮 id
            ,choose: function(obj){
                //当选择完一次图片后，使图片按钮失效，不可用
                $("#test2").addClass("layui-btn layui-btn-disabled");
                $("#test2").prop("disabled", true);
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,before: function(obj){     //文件上传之前函数回调
                this.data={"goId":goId,"imgIds":goodsUnDefaultImgIds,"imgDefault":0,"type":"1"}  //携带请求上传接口的额外参数。如：data: {id: 'xxx'}
            }
            ,done: function(res){   //上传后 ，函数回调
                if(res.code == 1001){   //上传成功
                    //    return layer.msg(res.message);
                    layer.open({
                        type: 1    //类型设置为 1，表示弹出层弹出的内容是 string
                        ,content: '<div style="padding: 20px 100px;">'+ res.message +'</div>'
                        ,btn: '确定'
                        ,btnAlign: 'c' //按钮居中
                        ,shade: 0 //不显示遮罩
                        ,yes: function(){
                            //    layer.closeAll();
                            top.location='goodsManager.jsp';  //点击确定后跳转到 商品信息管理页面
                        }
                    });
                }else if(res.code == 1002) {   //如果上传失败
                    return layer.msg(res.message);
                }
            }
        });

        /*当点击上传按钮后，是按钮失效，不可用*/
        $("#test8").click(function (){
            $(this).addClass("layui-btn layui-btn-disabled");
            $(this).prop("disabled", true);
        })

    });
</script>


</html>
